<template>
  <div class="box bgc">
    <!-- 顶部区域 -->
    <div>
        <van-nav-bar title="本地 全国" right-text="发布" left-arrow>
        <template #left>
            <van-icon name="search" size="18" />
        </template>


        <template #title>
            <span class="yop">本地</span>
            <span>全国</span>
        </template>


        <template #right>
            <van-button type="info" size="small">发布</van-button>
        </template>
        </van-nav-bar>
    </div>
    <!-- 顶部区域 -->

    <!-- 评论区 -->
    <div>
        <!-- 头bu信息区 -->
        <div class="flex jus jianju">
            <!-- 左边 -->
            <div class="flex">
                <div>
                    <van-image
                        round
                        width="50px"
                        height="50px"
                        src="https://img01.yzcdn.cn/vant/cat.jpeg"
                        />
                </div>
                <div>
                    <div>张美丽</div>
                    <div>2021-1-1</div>
                </div>
            </div>
            <!-- 左边 -->

            <!-- 右边 -->
            <div>
                <van-button icon="plus" type="info" size="small" round  plain>关注</van-button>
            </div>
            <!-- 右边 -->

        </div>
        <!-- 头像信息区 -->

        <!-- 主体区 -->
        <div class="jianju">
            <div>
                新的一年了，刚度过不平凡的一年，希望疫情早点结束，啊啦程锅加油
            </div>
            <div class="jianju">
                <img src="../../../assets/yisheng.png" alt="" width="110px" height="110px">
                <img src="../../../assets/yisheng.png" alt="" width="110px" height="110px">
                <img src="../../../assets/yisheng.png" alt="" width="110px" height="110px">
                <img src="../../../assets/yisheng.png" alt="" width="110px" height="110px">
                <img src="../../../assets/yisheng.png" alt="" width="110px" height="110px">
            </div>

            <div class="flex jus">
                <div>
                    <span class="dizhi">北京 | 昌平</span>
                </div>
                
                <div class="xaizi">
                    <van-icon name="eye-o" />999
                    <van-icon name="good-job-o" />999
                    <van-icon name="comment-o" />999
                </div>
            </div>
        </div>
        <!-- 主体区 -->
    </div>
    <!-- 评论区 -->


    <div>
        <!-- 头bu信息区 -->
        <div class="flex jus jianju">
            <!-- 左边 -->
            <div class="flex">
                <div>
                    <van-image
                        round
                        width="50px"
                        height="50px"
                        src="https://img01.yzcdn.cn/vant/cat.jpeg"
                        />
                </div>
                <div>
                    <div>张美丽</div>
                    <div>2021-1-1</div>
                </div>
            </div>
            <!-- 左边 -->

            <!-- 右边 -->
            <div>
                <van-button icon="plus" type="info" size="small" round  plain>关注</van-button>
            </div>
            <!-- 右边 -->

        </div>
        <!-- 头像信息区 -->

        <!-- 主体区 -->
        <div class="jianju">
            <div>
                新的一年了，刚度过不平凡的一年，希望疫情早点结束，啊啦程锅加油
            </div>
            <div class="jianju">
                <img src="../../../assets/yisheng.png" alt="" width="110px" height="110px">
                <img src="../../../assets/yisheng.png" alt="" width="110px" height="110px">
                <img src="../../../assets/yisheng.png" alt="" width="110px" height="110px">
                <img src="../../../assets/yisheng.png" alt="" width="110px" height="110px">
                <img src="../../../assets/yisheng.png" alt="" width="110px" height="110px">
            </div>

            <div class="flex jus">
                <div>
                    <span class="dizhi">北京 | 昌平</span>
                </div>
                
                <div class="xaizi">
                    <van-icon name="eye-o" />999
                    <van-icon name="good-job-o" />999
                    <van-icon name="comment-o" />999
                </div>
            </div>
        </div>
        <!-- 主体区 -->
    </div>


  </div>
</template>

<script>
export default {

}
</script>

<style lang="less" scoped>
.box{
    width: 350px;
    height: 844px;
    margin: auto 20px;
}
.yop{
    margin-right: 50px;
    color: skyblue;
}

.flex{
    display: flex;
}
.jus{
    justify-content: space-between;
}
.dizhi{
    color: #B7B7B8 ;
    background-color:#EFEEEE ;
}
.xaizi{
    color: #B0AFAE;
}
.jianju{
    margin-top: 15px;
}

.bgc{
    color: #B0AFAE ;
}
</style>